<template>
  <div class="left-menu-container">
    <ul class="left-tab">
      <li 
        v-for="(tab,index) in leftTabList" 
        :key="index" 
        
        v-bind:class="{ 'active-left-tab':tab.name===$store.state.tabActive.name}"
      >
        <div class="tab-fir-menu" @click="leftTabClick(tab,index)">
          <span class="fir-menu_right"><img src="../../assets/img/menu_right.png" alt="right"></span>
          <p>{{tab.title}}</p>
        </div>
        <!-- 二级 -->
        <ul v-if="tab.tabData" class="left-tab-sec-ul">
          <li v-for="(secTab,secIndex) in tab.tabData" :key="secIndex" >
            <div class="tab-sec-menu">
              <span class="sec-menu_right"><img src="../../assets/img/menu_right.png" alt="right"></span>
              <p>{{secTab.title}}</p>
            </div>
            <!-- 三级 -->
            <ul v-if="secTab.tabData" class="left-tab-thr-ul">
              <li v-for="(thrTab,thrIndex) in secTab.tabData" :key="thrIndex" >
                <div class="tab-thr-menu">
                  <span class="thr-menu_right"><img src="../../assets/img/menu_right.png" alt="right"></span>
                  <p>{{thrTab.title}}</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</template>

<script>

export default {
  name: 'leftmenu',
  props: ['leftTabList'],
  data () {
    return {
      tabsRightList:[]
    }
  },
  computed: {
    lang () {
      return this.$t('lang')
    }
  },
  methods: {
    leftTabClick: function (tab,index) {
      this.$store.commit('addTabs',tab) //添加tab
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .active-left-tab{
    background-color: #fff;
  }




  
  @media screen and (min-width: 1200px) {
    .left-menu-container{
      width: 216px;
      height: 1322px;
      background: #e9e9e9;
    }
    .left-tab{
      width: 100%;
      padding-top: 16px;
      list-style: none;
    }
    .left-tab li .tab-fir-menu,.left-tab li .tab-sec-menu,.left-tab li .tab-thr-menu{
      width: 100%;
      height: 40px;
      font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #7e6b5a;
      display: flex;
      align-items: center;
      padding-left: 40px;
      box-sizing: border-box;
      cursor: pointer;
      margin-top: 8px;
    }
    .left-tab li:first-child{
      margin-top: 0;
    }
    .left-tab li .fir-menu_right,.left-tab li .sec-menu_right,.left-tab li .thr-menu_right{
      margin-right: 7px;
    }
    .left-tab li .menu_right img{
      display: block;
      width: 5px;
      height: 6px;
    }
    .left-tab-thr-ul{
      /* display: none; */
    }

  }
  
</style>
